<template>
  <div class="strut-div">
    <div class="card-item margin20" style="height:285px;">
      <p class="card-title">农产品加工产值</p>
      <div class="card-div" style="width: 49%;display: inline-block;margin-right: 1%;">
        <common-line-chart ref="processingOutput" :config="processingOutputConfig">
        </common-line-chart>
      </div>
      <div class="card-div" style="width: 49%;display: inline-block;">
        <common-line-chart ref="outputValue" :config="outputValueConfig">
        </common-line-chart>
      </div>
    </div>
    <div class="card-item margin20" style="height:354px;">
      <p class="card-title">农业设施种类数量</p>
      <div class="card-div">
        <common-pieNew-chart ref="facilityType" :config="facilityTypeConfig" style="height: 425px">
        </common-pieNew-chart>
      </div>
    </div>
    <div class="card-item margin20" style="height:335px;">
      <p class="card-title">农业物资消耗</p>
      <div class="card-div">
        <common-line-chart ref="materialConsumption" :config="materialConsumptionConfig">
        </common-line-chart>
      </div>
    </div>
    <div class="card-item margin20" style="height:310px;display: inline-block;width: 49%;margin-right: 1%;">
      <p class="card-title">农业经营模式</p>
      <div class="card-div">
        <common-pieNew-chart ref="businessModel" :config="businessModelConfig" style="height: 425px">
        </common-pieNew-chart>
      </div>
    </div>
    <div class="card-item margin20" style="height:310px;display: inline-block;width: 49%;">
      <p class="card-title">涉农服务企业数量</p>
      <div class="card-div">
        <common-pieNew-chart ref="serviceEnterprises" :config="serviceEnterprisesConfig" style="height: 425px">
        </common-pieNew-chart>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    materialConsumption,
    processingOutput,
    outputValue,
    facilityType,
    businessModel,
    serviceEnterprises
  } from '@/network/tg-fake-data.js';
  import CommonDualareaChart from "@/components/common/common-dualarea-chart.vue";
  import CommonLineChart from "@/components/common/common-line-chart.vue";
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  export default {
    components: {
      CommonLineChart,
      CommonDualareaChart,
      CommonPieNewChart,
    },
    data() {
      return {
        // 农业物资消耗
        materialConsumptionConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'materialConsumption',
            boundaryGap: true,
            yOffset: -10,
            yName: '单位(万元)',
            x: materialConsumption().xAxis,
            y: [{
              axis: {
                min: 0,
                max: null,
              },
              title: materialConsumption().names[0],
              data: materialConsumption().series[0],
              color: "#10C49B",
            }, {
              title: materialConsumption().names[1],
              data: materialConsumption().series[1],
              Color: "#FBCC13",
            }, {
              title: materialConsumption().names[2],
              data: materialConsumption().series[2],
              color: "#3FECFF",
            }, {
              title: materialConsumption().names[3],
              data: materialConsumption().series[3],
              color: "#EAC921",
            }]
          }
        },
        // 农产品加工产值 千克
        processingOutputConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'processingOutput',
            boundaryGap: true,
            yOffset: -10,
            yName: '(千克)',
            x: processingOutput().xAxis,
            y: [{
              axis: {
                min: 0,
                max: null,
                splitNumber: 7,
              },
              title: processingOutput().names[0],
              data: processingOutput().series[0],
              color: "#10C49B",
            }, {
              title: processingOutput().names[1],
              data: processingOutput().series[1],
              color: "#FBCC13"
            }]
          }
        },
        // 农产品加工产值 万元
        outputValueConfig: {
          request: {
            url: "url",
            params: {},
          },
          option: {
            id: 'outputValue',
            x: outputValue().xAxis,
            boundaryGap: true,
            yName: '(万元)',
            yOffset: -10,
            y: [{
              axis: {
                min: 0,
                max: null,
                splitNumber: 7,
              },
              title: outputValue().names[0],
              data: outputValue().series[0],
              color: "#3EA2FE",
            }, {
              title: outputValue().names[1],
              data: outputValue().series[1],
              color: "#6C43F7",
            }]
          }
        },
        // 农业设施种类数量
        facilityTypeConfig: {
          option: {
            title: '',
            id: 'facilityType',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            }, 
            legend: {
              show: true,
              left: '10%',
              top: '60%',
              itemGap: 30, //图例之间的间距
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },

            series: [{
              name: '',
              type: 'pie',
              radius: ['20%', '35%'],
              center: ['50%', '25%'],
              label: {
                color: "#fff",
                formatter: '{a} {b} :{c}({d}%)'
              },
              labelLine: {
                length: 10,
                length2: 40,
              },
              data: facilityType
            }]
          }
        },
        // 农业经营模式
        businessModelConfig: {
          option: {
            title: '',
            id: 'businessModel',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            }, 
            legend: {
              show: true,
              left: '10%',
              top: '50%',
              itemGap: 10, //图例之间的间距
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },

            series: [{
              name: '',
              type: 'pie',
              radius: ['20%', '35%'],
              center: ['50%', '25%'],
              label: {
                color: "#fff",
                formatter: '{d}%'
              },
              labelLine: {
                length: 10,
                length2: 40,
              },
              data: businessModel
            }]
          }

        },
        // 涉农服务企业数量
        serviceEnterprisesConfig: {

          option: {
            title: '',
            id: 'serviceEnterprises',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            }, 
            legend: {
              show: true,
              left: '10%',
              top: '50%',
              itemGap: 10, //图例之间的间距
              orient: 'horizontal',
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
            },

            series: [{
              name: '',
              type: 'pie',
              radius: ['20%', '35%'],
              center: ['50%', '25%'],
              label: {
                color: "#fff",
                formatter: '{d}%'
              },
              labelLine: {
                length: 10,
                length2: 40,
              },
              data: serviceEnterprises
            }]
          }

        },

      }
    },
    methods: {

    },
    mounted() {
      this.$refs.materialConsumption.initChart();
      this.$refs.processingOutput.initChart();
      this.$refs.outputValue.initChart();
      this.$refs.facilityType.initChart();
      this.$refs.businessModel.initChart();
      this.$refs.serviceEnterprises.initChart();
    },
  }

</script>

<style>
  .margin20 {
    margin-bottom: 20px;
  }

</style>
